<template>
  <div class="cn-page-block-wrapper">
    <div>
      <h1>{{ block.content }}</h1>
    </div>
    <div v-if="block.children && block.children.length > 0" class="cn-block-children-wrapper">
      <cn-block v-for="(child, index) in block.children" :key="index" :block="child" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from 'vue';
import { type CnBlock } from '../types';

const props = defineProps({
  block: {
    type: Object as PropType<CnBlock>,
    required: true,
  },
});
const { block } = toRefs(props);
</script>
